<template>
  <div class="product-box">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
      :key="3"
    >
      <div class="good-list">
        <div class="good-item" v-for="value in goods" :key="value.F_ProductId">
          <div
            @click="
                $router.push({
                  path: '/product',
                  query: { id: value.F_ProductId, parents_id: username },
                })
              "
          >
            <!-- <a :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
            <!-- <div @click="$router.push('/product/' + value.F_ProductId+'/'+$store.state.userInfo.F_Question)"> -->
            <!-- <div @click="$router.push('/product/' + value.F_ProductId)"> -->
            <!-- <div>  -->
            <van-image
              class="product-img lazy-img"
                    lazy-load
                    :src="'http://higuang365.com/' + value.F_pic_url"
            />
            <div class="good-desc">
              <div class="county">
                <img
                  class="county-icon"
                  v-if="value.F_yuliu2"
                  :src="'http://higuang365.com/' + value.F_yuliu2"
                  alt=""
                />

                <div class="county-title">{{ value.F_BrandCountrie }}</div>
              </div>

              <div class="title">{{ value.F_Name }}</div>
              <span class="price">¥ {{ value.F_BdPrice }}</span>
              <br />
              <span class="estimate" v-show="value.F_BdPrice!=value.F_Price">零售价 {{ value.F_Price }}</span>

              <span
                class="share"
                @click.stop="addGoodsCart(value.F_yuliu3, value.F_ProductId)"
              >
                <i class="iconfont icon-gouwuche1"></i>
              </span>
              <!-- <div class="shop">{{ value["店铺"] }}</div> -->
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { toRefs, onDeactivated, onActivated, reactive } from "vue";
import {getCookie,addGoodsCart} from "@/lib/ecapi"
export default {
  name: "product",
  props: {
    list: {
      type: Object,
    },
  },
  setup(props, { emit }) {

    const data=reactive({
      username: getCookie("UNAME")
    })
    const onLoad = () => {
      emit("to-load", true);
    };
    let scrollTop = 0;
    onActivated(() => {
      document.getElementById("app").scrollTop = scrollTop;
    });
    onDeactivated(() => {
      scrollTop = document.getElementById("app").scrollTop;
    });
  
 
    return { ...toRefs(props.list),...toRefs(data), onLoad, addGoodsCart};
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.product-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100vw;
  }
  .good-item {
    box-sizing: border-box;
    width: 50%;
    border-bottom: 1px solid #e9e9e9;
    padding: 1rem;
    .product-img {
      display: block;
      width: 100%;
      height: calc(50vw - 2.2rem);
      margin: 0 auto;
    }
    .good-desc {
      text-align: left;
      font-size: 1.2rem;
      padding-top: 1rem;
      position: relative;
      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }
      .title {
        height: 3.4rem;
        line-height: 1.6rem;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
            font-size: 1.7rem;
    margin-top: 1rem;
    color: #ff0036;
    font-weight: bold;
      }
      .share {
        color: #3c8a58;
        position: absolute;
        right: 0;
        z-index: 10;
        i{
          font-size: 2rem;
        }
      }
      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
      }
    }
    &:nth-child(2n + 1) {
      border-right: 1px solid #e9e9e9;
    }
  }
}
</style>